<template>
  <div class="app-container">
    <div class="app-title">查询条件</div>
    <div class="filter-container clearfix">
      <!-- <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="用户Id/姓名/手机号" /> -->
      <div class="searchItem">
        <label for="">用户ID/姓名/手机号:</label>
        <el-input
          v-model="fromSearch.idOrNameOrMobile"
          placeholder="用户Id/姓名/手机号"
          class="search-item"
        />
      </div>

      <div class="searchItem">
        <label for="">推荐人姓名/手机号:</label>
        <el-input
          v-model="fromSearch.inviterNameOrMobile"
          placeholder="推荐人姓名/手机号:"
          class="search-item"
        />
      </div>
      <div class="searchItem">
        <label for="">身份:</label>
        <el-select v-model="fromSearch.roleType" placeholder="全部">
          <el-option value="0" label="普通用户" />
          <el-option value="1" label="经纪人" />
          <el-option value="2" label="城市合伙人" />
          <el-option value="3" label="品牌合伙人" />
        </el-select>
      </div>
      <div class="searchItem">
        <label for="">注册渠道:</label>
        <el-select v-model="fromSearch.application" placeholder="注册渠道">
          <el-option value="01" label="车E家" />
          <el-option value="02" label="车E家小程序" />
          <el-option value="00" label="E-Broker" />
        </el-select>
      </div>
      <div class="searchItem">
        <label for="">注册地址:</label>
        <el-select v-model="registerProvince" placeholder="省">
          <el-option
            v-for="item in provinceList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
        <el-select
          v-model="registerCity"
          placeholder="市"
          :disabled="registerProvince === ''"
        >
          <el-option
            v-for="item in cityList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </div>
      <div class="searchItem">
        <el-button
          v-has-permission="['usercenter:search']"
          class="searchItembtn"
          type="primary"
          @click="search"
        >
          {{ $t("common.search") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
      </div>
      <!-- </el-form> -->
    </div>
    <div class="app-title">用户管理列表</div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
    >
      <el-table-column
        label="用户ID"
        prop="username"
        :show-overflow-tooltip="true"
        align="center"
        min-width="120px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="手机号"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名/身份证号"
        :show-overflow-tooltip="true"
        min-width="150px"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.realName">
            <span>姓名:{{ scope.row.realName }}</span>
            <br>
            <span>身份证号:{{ scope.row.idCardNo | filteridCardNo }}</span>
          </div>
          <div v-else>
            暂无
          </div>

        </template>
      </el-table-column>
      <el-table-column
        label="身份"
        :show-overflow-tooltip="true"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{
            ["普通用户", "经纪人", "城市合伙人", "品牌合伙人"][
              scope.row.roleType
            ]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="团队人数(人)"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.indirectFansNum + scope.row.directFansNum || 0
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="推荐人姓名/手机号"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.inviterName">
            <span>姓名:{{ scope.row.inviterName }}</span><br>
            <span>手机号:{{ scope.row.inviterMobile }}</span>

          </div>
          <div v-else>
            暂无
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="注册渠道/注册时间"
        :show-overflow-tooltip="true"
        min-width="150px"
      >
        <template slot-scope="scope">
          <!-- <span>渠道:{{ ["", "APP", "小程序"][scope.row.application] }}</span> -->
          <span>渠道:{{
            scope.row.application == '00'
              ? "ebroker"
              : scope.row.application == '01'
                ? "车E家"
                : scope.row.application == '02'
                  ? "ecarbroker小程序"
                  : ""
          }}</span>
          <br>
          <span>时间:{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="注册地址"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.registerCity==null?'无记录':scope.row.registerCity }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <!-- <i
            v-hasPermission="['usercenter:view']"
            class="el-icon-view table-operation"
            style="color: #87d068"
            @click="view(row)"
          /> -->
          <el-link
            v-hasPermission="['usercenter:view']"
            class="el-icon-view"
            @click="view(row)"
          >
            查看详情
          </el-link>
          <el-link v-has-no-permission="['usercenter:view']" class="no-perm">
            {{ $t("tips.noPermission") }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      loading: false,
      fromSearch: {
        idOrNameOrMobile: '',
        inviterNameOrMobile: '',
        roleType: '',
        application: ''
      },
      tableKey: 0,
      list: [],
      provinceList: [],
      cityList: [],
      registerProvince: '',
      registerCity: ''
    }
  },
  watch: {
    registerProvince(val, old) {
      this.$get(`/web/areas/get/all/city?provinceId=${val}&name=`).then(res => {
        if (res.data.code === '0') {
          this.cityList = res.data.data
        }
      })
    }
  },
  created() {
    this.$get('/web/areas/get/all/province?name=').then(res => {
      if (res.data.code === '0') {
        this.provinceList = res.data.data
      }
    })
    this.search()
  },
  methods: {
    search(e) {
      this.loading = true
      if (e && e.page) {
        this.pagination.pageSize = e.limit
        this.pagination.pageNum = e.page
      }
      const { registerProvince, registerCity } = this
      this.$get('/web/user/list', {
        ...this.pagination,
        ...this.fromSearch,
        registerProvince,
        registerCity
      })
        .then(res => {
          this.loading = false
          this.list = res.data.data.rows
          this.total = res.data.data.total
        })
        .catch(() => {
          this.loading = false
        })
    },
    reset() {
      this.fromSearch = {}
      this.registerProvince = ''
      this.registerCity = ''
      this.search()
    }, // 查询数据
    view({ id, indirectFansNum, directFansNum }) {
      this.$router.push({
        name: 'userDetail',
        query: {
          id,
          invite: (indirectFansNum || 0) + (directFansNum || 0)
        }
      })
    }
  }
}
</script>

<style></style>
